// 提供一个能够显示xtx-message组件的功能
// 这个函数将来: 导入直接使用, 也可以挂载在vue实例原型上
// import Message from 'Message.js'  Message({type: 'error', textL '提示'})

import XtxMessage from '@/components/library/XtxMessage'
import { createVNode, render } from 'vue'

// 放在外面, 调用方法是值创建一次, 但是会出现一个问题, 弹框值出现一次!!!
// 可能和我的消息提示组件有关 --> 错误, 因为没有销毁vNode虚拟节点

// DOM容器
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)

// 定时器标识
let timer = null
// export declare type CreateAppFunction<HostElement> = (rootComponent: Component, rootProps?: Data | null) => App<HostElement>;
// declare function _createVNode(type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT, props?: (Data & VNodeProps) | null, children?: unknown, patchFlag?: number, dynamicProps?: string[] | null, isBlockNode?: boolean): VNode;
export default function ({
  type,
  text
}) {
  // 渲染组件
  // 1.导入消息提示组件
  // 2.将消息提供组件编译为虚拟节点(dom节点)   ☆☆
  // createVNode(组件, 属性对象(props) )
  const vNode = createVNode(XtxMessage, {
    type,
    text
  })
  // 3.准备一个装载消息提示组件的容器
  const div = document.createElement('div')
  div.setAttribute('class', 'xtx-message-container')
  document.body.appendChild(div)
  // 4.将虚拟节点渲染到容器中
  // render(虚拟节点, DOM容器)
  render(vNode, div)

  // 3s后销毁组件
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2500)
}
